<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script>
    // const listTree = [
    //   {
    //     id: 1,
    //     name: "部门1",
    //     pid: 0,
    //     children: [
    //       {
    //         id: 2,
    //         name: "部门1-1",
    //         pid: 1,
    //         children: [
    //           {
    //             id: 4,
    //             name: "部门1-1-1",
    //             pid: 2,
    //             children: [],
    //           },
    //         ],
    //       },
    //       {
    //         id: 3,
    //         name: "部门1-2",
    //         pid: 1,
    //         children: [
    //           {
    //             id: 5,
    //             name: "部门1-2-1",
    //             pid: 3,
    //             children: [],
    //           },
    //         ],
    //       },
    //     ],
    //   },
    //   {
    //     id: 6,
    //     name: "部门2",
    //     pid: 0,
    //     children: [
    //       {
    //         id: 7,
    //         name: "部门2-1",
    //         pid: 6,
    //         children: [],
    //       },
    //     ],
    //   },
    //   {
    //     id: 8,
    //     name: "部门3",
    //     pid: 0,
    //     children: [],
    //   },
    // ];
    // function treeToArray(arr) {
    //   const map = {};
    //   const tree = [];

    //   arr.forEach((element) => {
    //     map[element.id] = {
    //       ...element,
    //       children: [],
    //     };
    //   });

    //   arr.forEach((item) => {
    //     if (item.pid === null || item.pid === 0) {
    //       tree.push(map[item.id]);
    //     } else {
    //       if (!map[item.pid]) return;
    //       map[item.pid].children.push(map[item.id]);
    //     }
    //   });

    //   return tree;
    // }
    // console.log(treeToArray(listTree));

    /**
     * 将树形结构数据转换为平面数组
     * @param {Array} tree - 树形结构数据
     * @param {string} [childrenKey='children'] - 子节点字段名
     * @returns {Array} - 转换后的平面数组
     */
    function treeToArray(tree, childrenKey = "children") {
      const result = [];

      function flatten(node) {
        const newNode = { ...node };
        // 移除子节点字段
        delete newNode[childrenKey];
        result.push(newNode);

        // 递归处理子节点
        if (
          node[childrenKey] &&
          Array.isArray(node[childrenKey]) &&
          node[childrenKey].length > 0
        ) {
          node[childrenKey].forEach((child) => flatten(child));
        }
      }

      // 处理可能是数组或单个节点的情况
      if (Array.isArray(tree)) {
        tree.forEach((node) => flatten(node));
      } else {
        flatten(tree);
      }

      return result;
    }

    // 使用示例
    const listTree = [
      {
        id: 1,
        name: "部门1",
        pid: 0,
        children: [
          {
            id: 2,
            name: "部门1-1",
            pid: 1,
            children: [
              {
                id: 4,
                name: "部门1-1-1",
                pid: 2,
                children: [],
              },
            ],
          },
          {
            id: 3,
            name: "部门1-2",
            pid: 1,
            children: [
              {
                id: 5,
                name: "部门1-2-1",
                pid: 3,
                children: [],
              },
            ],
          },
        ],
      },
      {
        id: 6,
        name: "部门2",
        pid: 0,
        children: [
          {
            id: 7,
            name: "部门2-1",
            pid: 6,
            children: [],
          },
        ],
      },
      {
        id: 8,
        name: "部门3",
        pid: 0,
        children: [],
      },
    ];

    console.log(treeToArray(listTree));
  </script>
  <body></body>
</html>
